<template>
  <div id="cart">
    <!-- 导航 -->
    <NavBar class="nav-bar">
      <template v-slot:center>
        <div>购物车({{cartLength}})</div>
      </template>
    </NavBar>

    <!-- 商品列表 -->
    <cartList></cartList>
    <!-- 上拉加载 -->

    <!-- 底部工具栏 -->
    <bottom-tool ></bottom-tool>
  </div>
</template>

<script>
  import NavBar from 'components/common/navigation-bar'
  import cartList from './cartCpm/cartList.vue'
  import bottomTool from './cartCpm/bottomTool.vue'
  import {mapGetters} from 'vuex'
  export default {
    name:'shopCart',
    data(){
      return {}
    },
    components:{
      NavBar,
      cartList,
      bottomTool
    },
    created(){
      // 获取购物车信息

    },
    computed:{
     // 映射getters的方法到computed中作为computed的属性使用
     ...mapGetters(['cartLength'])
    }
  }
</script>

<style scoped>
  .nav-bar{
    background-color:#ff5777;
    color:#fff;
  }
</style>
